<template>
  <BasePage title="成员管理">
    <div class="bg-white p-6 rounded-lg shadow-md">
      <!-- 顶部操作栏 -->
      <div class="flex justify-between items-center mb-6">
        <div class="flex space-x-4">
          <button
            @click="showAddModal = true"
            class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md flex items-center"
          >
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            添加成员
          </button>
          <button
            @click="showImportModal = true"
            class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md flex items-center"
          >
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
            </svg>
            批量导入
          </button>
        </div>
        <div class="flex items-center space-x-4">
          <div class="relative">
            <input
              v-model="searchQuery"
              type="text"
              placeholder="搜索成员..."
              class="border border-gray-300 rounded-md px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            <svg
              class="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
              ></path>
            </svg>
          </div>
          <select
            v-model="filterRole"
            class="border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          >
            <option value="">所有角色</option>
            <option value="counselor">辅导员</option>
            <option value="college">学院管理员</option>
            <option value="school">学校管理员</option>
          </select>
          <select
            v-model="filterCollege"
            class="border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          >
            <option value="">所有学院</option>
            <option value="计算机科学与技术学院">计算机科学与技术学院</option>
            <option value="机械工程学院">机械工程学院</option>
            <option value="电气工程学院">电气工程学院</option>
            <option value="经济管理学院">经济管理学院</option>
            <option value="外国语学院">外国语学院</option>
          </select>
        </div>
      </div>

      <!-- 成员表格 -->
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
              >
                姓名
              </th>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
              >
                工号
              </th>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
              >
                学院
              </th>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
              >
                角色
              </th>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
              >
                创建时间
              </th>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
              >
                最后登录
              </th>
              <th
                scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
              >
                操作
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="member in filteredMembers" :key="member.id" class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 font-medium">
                    {{ member.name.charAt(0) }}
                  </div>
                  <div class="ml-4">
                    <div class="text-sm font-medium text-gray-900">{{ member.name }}</div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ member.employeeId }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ member.college }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span
                  :class="{
                    'px-2 py-1 text-xs rounded-full': true,
                    'bg-blue-100 text-blue-800': member.role === 'counselor',
                    'bg-green-100 text-green-800': member.role === 'college',
                    'bg-purple-100 text-purple-800': member.role === 'school'
                  }"
                >
                  {{ getRoleName(member.role) }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ member.createdAt }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ member.lastLogin || '从未登录' }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <button
                  @click="editMember(member)"
                  class="text-indigo-600 hover:text-indigo-900 mr-3"
                >
                  编辑
                </button>
                <button
                  @click="confirmDelete(member)"
                  class="text-red-600 hover:text-red-900"
                >
                  删除
                </button>
              </td>
            </tr>
            <tr v-if="filteredMembers.length === 0">
              <td colspan="7" class="px-6 py-4 text-center text-gray-500">
                暂无数据
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="flex items-center justify-between mt-6">
        <div class="flex-1 flex justify-between sm:hidden">
          <button
            @click="prevPage"
            :disabled="currentPage === 1"
            class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
            :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }"
          >
            上一页
          </button>
          <button
            @click="nextPage"
            :disabled="currentPage === totalPages"
            class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
            :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }"
          >
            下一页
          </button>
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
          <div>
            <p class="text-sm text-gray-700">
              显示第
              <span class="font-medium">{{ (currentPage - 1) * pageSize + 1 }}</span>
              至
              <span class="font-medium">
                {{ Math.min(currentPage * pageSize, totalMembers) }}
              </span>
              条，共
              <span class="font-medium">{{ totalMembers }}</span>
              条记录
            </p>
          </div>
          <div>
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
              <button
                @click="prevPage"
                :disabled="currentPage === 1"
                class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }"
              >
                <span class="sr-only">上一页</span>
                &lt;
              </button>
              <button
                v-for="page in displayedPages"
                :key="page"
                @click="goToPage(page)"
                :class="[
                  'relative inline-flex items-center px-4 py-2 border text-sm font-medium',
                  currentPage === page
                    ? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
                    : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
                ]"
              >
                {{ page }}
              </button>
              <button
                @click="nextPage"
                :disabled="currentPage === totalPages"
                class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }"
              >
                <span class="sr-only">下一页</span>
                &gt;
              </button>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加成员弹窗 -->
    <div v-if="showAddModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-gray-200">
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-medium text-gray-900">添加成员</h3>
            <button @click="showAddModal = false" class="text-gray-400 hover:text-gray-500">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
        <div class="px-6 py-4">
          <div class="mb-4">
            <label class="block text-sm text-gray-700 mb-1">姓名</label>
            <input
              v-model="newMember.name"
              type="text"
              class="w-full border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          <div class="mb-4">
            <label class="block text-sm text-gray-700 mb-1">工号</label>
            <input
              v-model="newMember.employeeId"
              type="text"
              class="w-full border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          <div class="mb-4">
            <label class="block text-sm text-gray-700 mb-1">学院</label>
            <select
              v-model="newMember.college"
              class="w-full border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="">请选择学院</option>
              <option value="计算机科学与技术学院">计算机科学与技术学院</option>
              <option value="机械工程学院">机械工程学院</option>
              <option value="电气工程学院">电气工程学院</option>
              <option value="经济管理学院">经济管理学院</option>
              <option value="外国语学院">外国语学院</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-sm text-gray-700 mb-1">角色</label>
            <select
              v-model="newMember.role"
              class="w-full border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="">请选择角色</option>
              <option value="counselor">辅导员</option>
              <option value="college">学院管理员</option>
              <option value="school">学校管理员</option>
            </select>
          </div>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 flex justify-end">
          <button
            @click="showAddModal = false"
            class="mr-2 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
          >
            取消
          </button>
          <button
            @click="addMember"
            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
            :disabled="!isFormValid"
            :class="{ 'opacity-50 cursor-not-allowed': !isFormValid }"
          >
            添加
          </button>
        </div>
      </div>
    </div>

    <!-- 编辑成员弹窗 -->
    <div v-if="showEditModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-gray-200">
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-medium text-gray-900">编辑成员</h3>
            <button @click="showEditModal = false" class="text-gray-400 hover:text-gray-500">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
        <div class="px-6 py-4">
          <div class="mb-4">
            <label class="block text-sm text-gray-700 mb-1">姓名</label>
            <input
              v-model="editingMember.name"
              type="text"
              class="w-full border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          <div class="mb-4">
            <label class="block text-sm text-gray-700 mb-1">工号</label>
            <input
              v-model="editingMember.employeeId"
              type="text"
              class="w-full border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              disabled
            />
          </div>
          <div class="mb-4">
            <label class="block text-sm text-gray-700 mb-1">学院</label>
            <select
              v-model="editingMember.college"
              class="w-full border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="计算机科学与技术学院">计算机科学与技术学院</option>
              <option value="机械工程学院">机械工程学院</option>
              <option value="电气工程学院">电气工程学院</option>
              <option value="经济管理学院">经济管理学院</option>
              <option value="外国语学院">外国语学院</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-sm text-gray-700 mb-1">角色</label>
            <select
              v-model="editingMember.role"
              class="w-full border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="counselor">辅导员</option>
              <option value="college">学院管理员</option>
              <option value="school">学校管理员</option>
            </select>
          </div>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 flex justify-end">
          <button
            @click="showEditModal = false"
            class="mr-2 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
          >
            取消
          </button>
          <button
            @click="updateMember"
            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
          >
            保存
          </button>
        </div>
      </div>
    </div>

    <!-- 批量导入弹窗 -->
    <div v-if="showImportModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-gray-200">
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-medium text-gray-900">批量导入成员</h3>
            <button @click="showImportModal = false" class="text-gray-400 hover:text-gray-500">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
        <div class="px-6 py-4">
          <div class="mb-4">
            <div class="flex items-center justify-center w-full">
              <label
                class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"
              >
                <div class="flex flex-col items-center justify-center pt-5 pb-6">
                  <svg
                    class="w-10 h-10 mb-3 text-gray-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                    ></path>
                  </svg>
                  <p class="mb-2 text-sm text-gray-500">
                    <span class="font-semibold">点击上传</span> 或拖放文件
                  </p>
                  <p class="text-xs text-gray-500">支持 XLSX, CSV 格式</p>
                </div>
                <input type="file" class="hidden" accept=".xlsx,.csv" />
              </label>
            </div>
          </div>
          <div class="mb-4">
            <a
              href="#"
              class="text-blue-500 hover:text-blue-700 flex items-center"
            >
              <svg
                class="w-4 h-4 mr-1"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                ></path>
              </svg>
              下载导入模板
            </a>
          </div>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 flex justify-end">
          <button
            @click="showImportModal = false"
            class="mr-2 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
          >
            取消
          </button>
          <button
            @click="importMembers"
            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
          >
            导入
          </button>
        </div>
      </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div v-if="showDeleteModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-gray-200">
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-medium text-gray-900">确认删除</h3>
            <button @click="showDeleteModal = false" class="text-gray-400 hover:text-gray-500">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
        <div class="px-6 py-4">
          <div class="flex items-center mb-4">
            <svg class="h-12 w-12 text-red-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
              />
            </svg>
            <div>
              <h4 class="text-lg font-medium text-gray-900">删除成员</h4>
              <p class="text-sm text-gray-500">
                您确定要删除 {{ memberToDelete?.name }} ({{ memberToDelete?.employeeId }}) 吗？此操作无法撤销。
              </p>
            </div>
          </div>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 flex justify-end">
          <button
            @click="showDeleteModal = false"
            class="mr-2 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
          >
            取消
          </button>
          <button
            @click="deleteMember"
            class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
          >
            删除
          </button>
        </div>
      </div>
    </div>
  </BasePage>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import BasePage from '../../components/BasePage.vue';

export default {
  name: 'MemberManagement',
  components: {
    BasePage
  },
  setup() {
    // 成员数据
    const members = ref([]);
    const searchQuery = ref('');
    const filterRole = ref('');
    const filterCollege = ref('');

    // 分页
    const currentPage = ref(1);
    const pageSize = ref(10);
    const totalMembers = computed(() => filteredMembers.value.length);
    const totalPages = computed(() => Math.ceil(totalMembers.value / pageSize.value));

    // 显示的页码
    const displayedPages = computed(() => {
      const pages = [];
      const maxPagesToShow = 5;
      
      let startPage = Math.max(1, currentPage.value - Math.floor(maxPagesToShow / 2));
      let endPage = Math.min(totalPages.value, startPage + maxPagesToShow - 1);
      
      if (endPage - startPage + 1 < maxPagesToShow) {
        startPage = Math.max(1, endPage - maxPagesToShow + 1);
      }
      
      for (let i = startPage; i <= endPage; i++) {
        pages.push(i);
      }
      
      return pages;
    });

    // 过滤后的成员
    const filteredMembers = computed(() => {
      let result = [...members.value];
      
      // 搜索
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase();
        result = result.filter(member => 
          member.name.toLowerCase().includes(query) ||
          member.employeeId.toLowerCase().includes(query)
        );
      }
      
      // 角色过滤
      if (filterRole.value) {
        result = result.filter(member => member.role === filterRole.value);
      }
      
      // 学院过滤
      if (filterCollege.value) {
        result = result.filter(member => member.college === filterCollege.value);
      }
      
      return result;
    });

    // 分页后的成员
    const paginatedMembers = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return filteredMembers.value.slice(start, end);
    });

    // 弹窗状态
    const showAddModal = ref(false);
    const showEditModal = ref(false);
    const showImportModal = ref(false);
    const showDeleteModal = ref(false);

    // 新成员表单
    const newMember = ref({
      name: '',
      employeeId: '',
      college: '',
      role: ''
    });

    // 表单验证
    const isFormValid = computed(() => {
      return (
        newMember.value.name.trim() !== '' &&
        newMember.value.employeeId.trim() !== '' &&
        newMember.value.college !== '' &&
        newMember.value.role !== ''
      );
    });

    // 编辑成员
    const editingMember = ref({});
    const memberToDelete = ref(null);

    // 获取角色名称
    const getRoleName = (role) => {
      const roleMap = {
        'counselor': '辅导员',
        'college': '学院管理员',
        'school': '学校管理员'
      };
      return roleMap[role] || role;
    };

    // 加载数据
    const loadData = () => {
      // 模拟数据
      members.value = [
        {
          id: 1,
          name: '张三',
          employeeId: '10001',
          college: '计算机科学与技术学院',
          role: 'counselor',
          createdAt: '2023-01-15',
          lastLogin: '2023-05-15 08:45:22'
        },
        {
          id: 2,
          name: '李四',
          employeeId: '10002',
          college: '机械工程学院',
          role: 'college',
          createdAt: '2023-01-16',
          lastLogin: '2023-05-14 16:30:10'
        },
        {
          id: 3,
          name: '王五',
          employeeId: '10003',
          college: '电气工程学院',
          role: 'counselor',
          createdAt: '2023-01-18',
          lastLogin: '2023-05-13 11:20:45'
        },
        {
          id: 4,
          name: '赵六',
          employeeId: '10004',
          college: '经济管理学院',
          role: 'college',
          createdAt: '2023-01-20',
          lastLogin: '2023-05-12 14:10:30'
        },
        {
          id: 5,
          name: '钱七',
          employeeId: '10005',
          college: '外国语学院',
          role: 'school',
          createdAt: '2023-01-22',
          lastLogin: '2023-05-11 09:05:15'
        },
        {
          id: 6,
          name: '孙八',
          employeeId: '10006',
          college: '计算机科学与技术学院',
          role: 'counselor',
          createdAt: '2023-01-25',
          lastLogin: '2023-05-10 13:45:30'
        },
        {
          id: 7,
          name: '周九',
          employeeId: '10007',
          college: '机械工程学院',
          role: 'counselor',
          createdAt: '2023-01-28',
          lastLogin: '2023-05-09 10:20:15'
        },
        {
          id: 8,
          name: '吴十',
          employeeId: '10008',
          college: '电气工程学院',
          role: 'college',
          createdAt: '2023-02-01',
          lastLogin: '2023-05-08 15:30:45'
        },
        {
          id: 9,
          name: '郑十一',
          employeeId: '10009',
          college: '经济管理学院',
          role: 'counselor',
          createdAt: '2023-02-05',
          lastLogin: '2023-05-07 09:15:30'
        },
        {
          id: 10,
          name: '王十二',
          employeeId: '10010',
          college: '外国语学院',
          role: 'college',
          createdAt: '2023-02-10',
          lastLogin: '2023-05-06 14:25:10'
        },
        {
          id: 11,
          name: '李十三',
          employeeId: '10011',
          college: '计算机科学与技术学院',
          role: 'school',
          createdAt: '2023-02-15',
          lastLogin: '2023-05-05 11:40:25'
        },
        {
          id: 12,
          name: '张十四',
          employeeId: '10012',
          college: '机械工程学院',
          role: 'counselor',
          createdAt: '2023-02-20',
          lastLogin: null
        }
      ];
    };

    // 分页操作
    const prevPage = () => {
      if (currentPage.value > 1) {
        currentPage.value--;
      }
    };

    const nextPage = () => {
      if (currentPage.value < totalPages.value) {
        currentPage.value++;
      }
    };

    const goToPage = (page) => {
      currentPage.value = page;
    };

    // 添加成员
    const addMember = () => {
      if (!isFormValid.value) return;

      const now = new Date();
      const formattedDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;

      const newId = Math.max(...members.value.map(m => m.id), 0) + 1;
      
      members.value.push({
        id: newId,
        name: newMember.value.name,
        employeeId: newMember.value.employeeId,
        college: newMember.value.college,
        role: newMember.value.role,
        createdAt: formattedDate,
        lastLogin: null
      });

      // 重置表单
      newMember.value = {
        name: '',
        employeeId: '',
        college: '',
        role: ''
      };

      showAddModal.value = false;
    };

    // 编辑成员
    const editMember = (member) => {
      editingMember.value = { ...member };
      showEditModal.value = true;
    };

    // 更新成员
    const updateMember = () => {
      const index = members.value.findIndex(m => m.id === editingMember.value.id);
      if (index !== -1) {
        members.value[index] = { ...editingMember.value };
      }
      showEditModal.value = false;
    };

    // 确认删除
    const confirmDelete = (member) => {
      memberToDelete.value = member;
      showDeleteModal.value = true;
    };

    // 删除成员
    const deleteMember = () => {
      members.value = members.value.filter(m => m.id !== memberToDelete.value.id);
      showDeleteModal.value = false;
      memberToDelete.value = null;
    };

    // 批量导入成员
    const importMembers = () => {
      // 模拟导入操作
      alert('导入功能尚未实现');
      showImportModal.value = false;
    };

    // 初始化
    onMounted(() => {
      loadData();
    });

    return {
      members,
      filteredMembers,
      searchQuery,
      filterRole,
      filterCollege,
      currentPage,
      pageSize,
      totalMembers,
      totalPages,
      displayedPages,
      showAddModal,
      showEditModal,
      showImportModal,
      showDeleteModal,
      newMember,
      isFormValid,
      editingMember,
      memberToDelete,
      getRoleName,
      prevPage,
      nextPage,
      goToPage,
      addMember,
      editMember,
      updateMember,
      confirmDelete,
      deleteMember,
      importMembers
    };
  }
};
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>